<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>App</title>
  </head>
  <body>
    <p id="description">Some cool description</p>
    <p id="description1">Some cool description</p>
    <p id="description2">Some cool description</p>
    <p id="description3">Some cool description</p>
    <button id="myButton" onclick="click_callback()">Click here</button>

    <script type="text/javascript">
      var memory;
      var click_callback;

      function get_string(ptr, len) {
        const buf = new Uint8Array(memory.buffer, ptr, len);
        const str = new TextDecoder("utf8").decode(buf);
        return str;
      }

      const env = {
        change_color_by_id: (ptr, len, color_ptr, color_len) => {
          const elementId = get_string(ptr, len);
          const color = get_string(color_ptr, color_len);

          var element = document.getElementById(elementId);
          element.style.color = color;
        },
        __writeln: (ptr, len) => {
          console.log(get_string(ptr, len));
        },
        __panic_abort: (ptr, len) => {
          throw get_string(ptr, len);
        },
      };

      WebAssembly.instantiateStreaming(fetch("change_color_by_id.wasm"), {
        env: env,
      }).then((res) => {
        memory = res.instance.exports["memory"];

        console.time("main.main");
        res.instance.exports["main.main"]();
        console.timeEnd("main.main");

        click_callback = res.instance.exports["main.click_callback"];
      });
    </script>
  </body>
</html>
